<template>
  <div class="">
    <div class="container">
      <!-- 面包屑 -->
      <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <transition name="fade-right" mode="out-in">
          <XtxBreadItem>专题</XtxBreadItem>
        </transition>
      </XtxBread>
      <div class="panel-box">
        <!-- 排序组件 -->
        <SpecialSort @sort-change="changeSort" />
        <!-- 数据列表 -->
        <div v-if="loading" class="loading"></div>
        <div class="none" v-if="!loading && specialList.length === 0">当前专题暂无数据</div>
        <ul>
          <li v-for="item in specialList" :key="item.id">
            <div class="special-item">
              <a href="javascript:;" @click="$router.push('/special/special-detail/'+ item.id)">
                <img :src="item.cover" alt="">
                <div class="meta">
                  <p class="title">
                    <span class="top ellipsis">{{item.title}}</span>
                    <span class="sub ellipsis">{{item.summary}}</span>
                  </p>
                  <span class="price">&yen;{{item.lowestPrice}}起</span>
                </div>
              </a>
              <div class="foot">
                 <span class="like"><i class="iconfont icon-xin2" :class="{red: item.isCollect}" title="收藏"></i>{{item.collectNum}}</span>
                <span class="view"><i class="iconfont icon-chakan" title="浏览"></i>{{item.viewNum}}</span>
                <span class="reply"><i class="iconfont icon-zhibiaozhushibiaozhu" title="评价"></i>{{item.replyNum === undefined ? Math.round(Math.random() * 100) : item.replyNum}}</span>
              </div>
            </div>
          </li>
        </ul>
        <!-- 分页组件 -->
        <XtxPagination
          v-if="total"
          :total="total"
          :page-size="reqParams.pageSize"
          :current-page="reqParams.page"
          @current-change="reqParams.page=$event"
        />
      </div>
    </div>
  </div>
</template>

<script>
import SpecialSort from './components/special-sort.vue'
import { findSpecialList } from '@/api/special'
import { reactive, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
export default {
  name: 'SpecialClassify',
  components: {
    SpecialSort
  },
  setup () {
    // 查询参数
    const reqParams = reactive({
      page: 1,
      pageSize: 9
    })
    const route = useRoute()
    const specialList = ref([])
    const total = ref(0)
    const loading = ref(false)
    const getSpecialList = () => {
      loading.value = true
      reqParams.classificationId = route.params.id
      findSpecialList(reqParams).then(data => {
        specialList.value = data.result.items
        total.value = data.result.counts
        loading.value = false
      })
    }
    // 切换分页时发生变化就重新加载数据
    watch(reqParams, () => {
      getSpecialList()
    }, { immediate: true })
    // 排序条件改变更新数据
    // 子组件通过自定义事件传递数据给父组件，拿到排序数据给查询参数重新请求（第一页）即可
    const changeSort = (sortParams) => {
      reqParams.sortField = sortParams.sortField
      reqParams.sortRule = sortParams.sortRule
      reqParams.page = 1
    }
    return { reqParams, total, specialList, loading, changeSort }
  }
}
</script>

<style lang="less" scoped>
.panel-box {
  background: #fff;
  padding: 0 25px;
  min-height: 400px;
  position: relative;
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      margin-right: 25px;
      margin-bottom: 20px;
      &:nth-child(3n) {
        margin-right: 0;
      }
      .hoverShadow();
      .special-item {
        display: block;
        width: 380px;
        text-align: center;
        a {
          display: block;
          width: 100%;
          height: 288px;
          position: relative;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          .meta {
            background-image: linear-gradient(to top,rgba(0, 0, 0, 0.8),transparent 50%);
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 288px;
            .title {
              position: absolute;
              bottom: 0px;
              left: 0;
              padding-left: 16px;
              width: 70%;
              height: 70px;
              .top {
                color: #fff;
                font-size: 18px;
                display: block;
              }
              .sub {
                display: block;
                font-size: 16px;
                color: #999;
              }
            }
            .price {
              position: absolute;
              bottom: 25px;
              right: 16px;
              line-height: 1;
              padding: 4px 8px 4px 7px;
              color: @priceColor;
              font-size: 17px;
              background-color: #fff;
              border-radius: 2px;
            }
          }
        }
        .foot {
          height: 72px;
          line-height: 72px;
          padding: 0 20px;
          font-size: 16px;
          background: #f7f7f7;
          i {
            display: inline-block;
            width: 15px;
            height: 14px;
            margin-right: 5px;
            color: #999;
          }
          .like, .view {
            float: left;
            margin-right: 25px;
            vertical-align: middle;
            .red {
              color: red;
            }
          }
          .reply {
            float: right;
            vertical-align: middle;
          }
        }
      }
    }
  }
  .loading {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 100px;
    background: rgba(255,255,255,.9) url(../../assets/images/loading.gif) no-repeat center;
    }
  .none {
    height: 400px;
    text-align: center;
    line-height: 400px;
    color: #999;
    margin: 0 auto;
  }
}
</style>
